<template>
  <!-- 回测图表 -->
  <div v-if="backtestResults.equityCurve && backtestResults.equityCurve.length" class="backtest-chart-container" style="margin-top: 20px; height: 400px;">
    <div ref="backtestChart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'

export default {
  name: 'BacktestChart',
  props: {
    backtestResults: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const backtestChart = ref(null)
    let backtestChartInstance = null

    // 绘制回测结果图表
    const drawBacktestChart = (results) => {
      if (!backtestChart.value || !results || !results.equityCurve || !results.equityCurve.length) {
        console.warn('图表容器或数据不存在')
        return
      }
      
      // 销毁旧图表实例
      if (backtestChartInstance) {
        backtestChartInstance.dispose()
        backtestChartInstance = null
      }
      
      // 初始化图表
      backtestChartInstance = echarts.init(backtestChart.value)
      
      // 准备图表数据
      const dates = results.equityCurve.map(item => item.date)
      const equityValues = results.equityCurve.map(item => item.equity)
      
      const option = {
        title: {
          text: '回测结果 - 权益曲线',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const date = params[0].axisValue
            const value = params[0].data.toFixed(2)
            return `${date}<br/>权益: $${value}`
          }
        },
        xAxis: {
          type: 'category',
          data: dates,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          axisLabel: {
            formatter: function(value) {
              return value.split(' ')[0] // 只显示日期部分
            }
          }
        },
        yAxis: {
          type: 'value',
          scale: true,
          splitLine: { show: true },
          axisLabel: {
            formatter: '${value}'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '权益',
            type: 'line',
            data: equityValues,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: '#5470c6'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(84, 112, 198, 0.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(84, 112, 198, 0.1)'
                }
              ])
            }
          }
        ]
      }
      
      backtestChartInstance.setOption(option)
      
      // 响应窗口大小变化
      const resizeHandler = () => {
        if (backtestChartInstance) {
          backtestChartInstance.resize()
        }
      }
      window.addEventListener('resize', resizeHandler)
    }

    // 监听回测结果变化，重新绘制图表
    watch(() => props.backtestResults, (newResults) => {
      if (newResults && newResults.equityCurve && newResults.equityCurve.length) {
        nextTick(() => {
          drawBacktestChart(newResults)
        })
      }
    })

    onMounted(() => {
      // 初始绘制
      if (props.backtestResults && props.backtestResults.equityCurve && props.backtestResults.equityCurve.length) {
        nextTick(() => {
          drawBacktestChart(props.backtestResults)
        })
      }
    })

    onUnmounted(() => {
      // 销毁图表实例
      if (backtestChartInstance) {
        backtestChartInstance.dispose()
        backtestChartInstance = null
      }
    })

    return {
      backtestChart
    }
  }
}
</script>

<style scoped>
.backtest-chart-container {
  margin-top: 20px;
  height: 400px;
}
</style>